<template>
  <div>
<el-form ref="form" :model="form" label-width="80px" style="margin-left:80px" :rules="rules"  >
  <el-form-item label="节点名称" prop="name">
    <el-input v-model="form.name" style="width:200px"></el-input>
  </el-form-item>
   <el-form-item label="选择部门">
    <el-cascader :options="list" :props="props"  v-model="form.parent_id" @change="ch" clearable style="width:200px" placeholder="不选择默认为最高级"></el-cascader>
  </el-form-item>
  <el-form-item label="添加人名称" label-width="95px" prop="user" style="margin-left:-15px">
    <el-input v-model="form.user"  style="width:200px"></el-input>
  </el-form-item>
  <el-form-item label="添加人手机号"  label-width="110px" style="margin-left:-28px" prop="user_mobile">
    <el-input v-model.number="form.user_mobile"  style="width:200px"></el-input>
  </el-form-item>
  <el-form-item label="openid"  label-width="110px" style="margin-left:-28px" prop="openid">
    <el-input v-model.number="form.openid"  style="width:200px"></el-input>
  </el-form-item>
  <el-form-item >
    <el-button @click="on"  style="margin-left:150px">取消</el-button>
    <el-button type="primary" @click="add()">修改</el-button>
  </el-form-item>
</el-form>
  </div>
</template>

<script>
export default {
    props:['xiut'],
    data(){
        var validatorPhone = (rule,value,callback) =>{
            if(value == ''){
                callback(new Error('手机号不能为空'))
            }else{
                const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                if(!reg.test(value)){
                    callback(new Error('请输入正确的手机号'))
                }
            }
        }
        return{
            idt:'',
            token:'',
            id:'',
            list:[],
            form: {
                name: '',
                parent_id:null,
                user:'',
                user_mobile:'',
                openid: null
            },
           props: { value: "id", label: "name", children:'son',emitPath:false,checkStrictly:true},
           rules:{
               name:[
                    { required: true, message: '请输入节点名称', trigger: 'blur' },
                    { min: 1, max: 10, message: '节点名称在 1 到 10 个字符', trigger: 'blur' }
               ],
               user:[
                    { required: true, message: '请输入添加人名称', trigger: 'blur' },
                    { min: 1, max: 5, message: '添加人名称在 1 到 5 个字符', trigger: 'blur' }
               ],
               user_mobile:[
                    { validator: validatorPhone , trigger: 'blur' },
               ]
           }
        }
    },
     created(){
        this.gelist()
        this.id = this.xiut.id
        this.token = sessionStorage.getItem("token");
          this.$axios.get("http://121.42.230.80/api/visit/department/show", {
              params:{
                  id:this.id
              },
              headers: {
                Authorization: this.token,
              },
            })
            .then((res) => {
                this.form.name = res.data.data.name
                this.form.parent_id = res.data.data.parent_id
                this.form.user = res.data.data.user
                this.form.user_mobile = res.data.data.user_mobile
                this.form.openid = res.data.data.openid
            });
    },
    methods:{
      ch(e){
        this.idt = e
      },
        gelist(){
          this.$axios.get('http://121.42.230.80/api/visit/department/list',{
            headers:{
              Authorization:this.token
            }
          }).then((res)=>{
             this.list = this.getdlist(res.data.data)
          })
        },
        getdlist(data){
          for(var i = 0; i < data.length; i++){
            if(data[i].son.length < 1){
              data[i].son = undefined
            }else{
              this.getdlist(data[i].son)
            }
          }
          return data
        },
        on(){
            this.$emit('iu',false)
        },
         add(){
            if(this.id == this.idt){
              this.$message.success('修改成功')
              this.$emit('iu',false)
              return
            }
              if(this.form.parent_id == null){
                this.form.parent_id = 0
                this.$axios.post('http://121.42.230.80/api/visit/department/edit',{
                    id:this.id,
                    formdata:this.form,
                  headers:{
                    Authorization:this.token
                  }
                }).then((res)=>{
                    if(res.data.code == '00000'){
                        this.$emit('iu',false)
                        this.$message.success('修改成功')
                    }else{
                        this.$message.error('修改失败')
                    }
                })
            }else{
                this.$axios.post('http://121.42.230.80/api/visit/department/edit',{
                    id:this.id,
                    formdata:this.form,
                  headers:{
                    Authorization:this.token
                  }
                }).then((res)=>{
                    if(res.data.code == '00000'){
                        this.$emit('iu',false)
                        this.$message.success('修改成功')
                    }else{
                        this.$message.error('修改失败')
                    }
                })
                this.form.parent_id = null
                this.form.name = ''
                this.form.user = ''
                this.form.user_mobile = ''
                this.form.openid = null
            }
         }
    },
}
</script>

<style scoped>

</style>